<template>
    <div>
      <main-layout>
        <template v-slot:top>
          <el-form ref="searchForm" :inline="true" :model="searchInfo">
            <el-form-item label="姓名">
              <el-input v-model="searchInfo.name" placeholder="姓名" clearable />
            </el-form-item>
            <el-form-item label="电话">
              <el-input v-model="searchInfo.phone" placeholder="电话" clearable />
            </el-form-item>
            <el-form-item label="状态">
              <el-select v-model="searchInfo.state" clearable placeholder="请选择状态" style="width: 140px;">
                <el-option :value="0" label="全部" />
                <el-option :value="1" label="启用" />
                <el-option :value="2" label="停用" />
              </el-select>
            </el-form-item>
            <el-form-item label="是否失效">
                <el-select v-model="searchInfo.volunteerFlag" clearable placeholder="请选择是否失效" style="width: 140px;">
                  <el-option :value="0" label="全部" />
                  <el-option :value="1" label="是" />
                  <el-option :value="2" label="否" />
                </el-select>
              </el-form-item>
  
            <el-form-item>
              <el-button size="small" type="primary" icon="search" @click="onSubmit">查询</el-button>
              <el-button size="small" icon="refresh" @click="onReset">重置</el-button>
            </el-form-item>
          </el-form>
        </template>
  
        <c-table ref="tableRef" :page="{ pageSize, pageIndex, total }" :lists="tableData" @current-change="handleCurrentChange"
          @size-change="handleSizeChange" :loading="loading"  rowKey="id" selectKey='id'>
          <el-table-column align="center" label="ID" min-width="150" prop="id" />
          <el-table-column align="center" label="姓名" min-width="110" prop="name" />
          <el-table-column align="center" label="电话" min-width="120" prop="phone" />
          <el-table-column align="center" label="地址" min-width="180" prop="address" />
          <el-table-column align="center" label="性别" min-width="120" prop="sex">
            <template #default="scope">
                {{ scope.row.sex==1?'男':(scope.row.sex==2?'女':'未知')}}
              </template>
            </el-table-column>
          <el-table-column align="center" label="状态" min-width="120" prop="state">
            <template #default="scope">
              <!-- {{ scope.row.state==1?'启用':(scope.row.state==2?'停用':'')}} -->
              <el-select v-model="scope.row.state" style="width: 80px;" @change="setStatus(scope.row.id,scope.row.state)">
                <el-option :value="1" label="启用" />
                <el-option :value="2" label="停用" />
              </el-select>
            </template>
          </el-table-column>
          <el-table-column align="center" label="是否志愿者" min-width="140" prop="state">
            <template #default="scope">
              {{ scope.row.volunteerFlag==1?'是':(scope.row.volunteerFlag==2?'否':'')}}
            </template>
          </el-table-column>
          <el-table-column align="center" label="生日" width="160" >
            <template #default="scope">
              {{ formatDateLong(scope.row.birthday) }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="新增时间" width="160" >
            <template #default="scope">
              {{ formatDateLong(scope.row.createTime) }}
            </template>
          </el-table-column>
  
        </c-table>
  
        <addUser v-if="addUserFlag" v-model:show="addUserFlag" :title="opreatType==1?'新增账户':(opreatType==2?'编辑账户':'查看账户')" @success="getTableData" :type="opreatType" :editData="editData"/> 
  
      </main-layout>
  
    </div>
  </template>
  
  <script setup>
  import { ref,onMounted } from 'vue'
  import {getMemberList,updateMember} from '@/api/member'
  import { ElMessageBox } from 'element-plus'
  
  import mainLayout from '@/components/custom/mainLayout.vue'
  import cTable from '@/components/custom/cTable.vue'
  import addUser from './components/addUser.vue'
  
  import {formatDateLong} from '@/utils/format'
  import { useUserStore } from '@/pinia/modules/user'
  import {message} from '@/utils/element'

  const userStore = useUserStore()
  
  const pageIndex = ref(1)
  const total = ref(0)
  const pageSize = ref(10)
  const tableData = ref([])
  const searchInfo = ref({state:0,volunteerFlag:0})
  const loading = ref(true)
  const addUserFlag = ref(false)
  const tableRef = ref(null)
  const editData = ref({})
  const opreatType = ref(1)

  onMounted(()=>{
    getTableData()
  })
  
  const onReset = () => {
    searchInfo.value = {}
  }
  // 搜索
  const onSubmit = () => {
    pageIndex.value = 1
    tableRef.value.clear_selection()  // 清空所选
    getTableData()
  }
  // 分页
  const handleSizeChange = (val) => {
    pageIndex.value = 1
    pageSize.value = val
    getTableData()
  }
  
  const handleCurrentChange = (val) => {
    pageIndex.value = val
    getTableData()
  }
  
  // 查询
  const getTableData = async () => {
    const res = await getMemberList({ 
        pageNumber: pageIndex.value, 
        pageSize: pageSize.value, 
        ...searchInfo.value 
    })
    if (res.code == 0) {
      tableData.value = res.data.list
      total.value = res.data.total
    }
    loading.value = false
  }

  const setStatus = async (id,state)=>{
    const res = await updateMember({id,state})
    if(res.code == 0){
        message('修改成功',2)
        getTableData()
    }else{
        message(res.msg,3)
    }
    
  }
  
  </script>
  
  <style lang="scss" scoped>
  .inputLine {
    display: flex;
    width: 200px;
    .zhi{
      padding: 0 10px;
    }
    s{
      font-style: normal;
      text-decoration: none;
      padding: 0 0 0 5px;
      color: var(--el-text-color-regular);
    }
  }
  </style>
  